<template>
  <div class="content">
    <div class="content-row">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="16" :md="16" :lg="16">
          <div class="bg-purple bg-white">
            <PanelProup />
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" >
          <div class="bg-purple bg-white">
            <Chart1 />
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="content-row">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <div class="bg-purple bg-white"><Chart2 /></div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" >
          <div class="bg-purple bg-white">
            <my-chart  color="#f60"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" >
          <div class="bg-purple bg-white">
            <GChart
              :title="this.$t('message.title')"
              type="line"
              color="#573dcb"
              :chartData="[234,253,2532,643,74,25,437]"
              :xAxisData="['2011','2012','2013','2014','2015','2016','2017']"/>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="content-row">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" >
          <div class="bg-purple bg-white"><PanelProup /></div>
        </el-col>
        <el-col :xs="24" :sm="16" :md="16" :lg="16">
          <div class="bg-purple bg-white"><Map /></div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import {PanelProup,Chart1,Chart2,Map} from './components'
import GChart from '@/components/Gchart'

export default {
  data(){
    return {

    }
  },
  methods:{

  },
  components:{
    PanelProup,
    Chart1,
    Chart2,
    Map,
    GChart
  }
}
</script>


